<template>
	<view class="container">
		<!-- 搜索区 -->
		<view class="search">
			<uni-icons @click="$refs.drawerMenu.open()" type="bars" color="#fff" size="30"></uni-icons>
			<view class="input-group">
				<input @click="toSearch" disabled type="text" placeholder="请输入商品关键字">
				<image src="../../static/img/logo-s.png"></image>
				<uni-icons class="icon" type="search" size="30"></uni-icons>
			</view>
			<navigator open-type="switchTab" url="../userCenter/userCenter">登录</navigator>
		</view>
		
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
			<swiper-item class="swiper-item" v-for="(c,i) in carouselItems" :key="i">
				<view class="swiper-item">
					<image :src="$base + c.img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 首页推荐 -->
		<XzProductFloor title="首页推荐 / 1F" :productList="recommendedItems"/>
		<!-- 最新上架 -->
		<XzProductFloor title="最新上架 / 2F" :productList="newArrivalItems"/>
		<!-- 热销单品 -->
		<XzProductFloor title="热销单品 / 3F" :productList="topSaleItems"/>
		
		<!-- 页尾 -->
		<XzFooter></XzFooter>
		<!-- 返回顶部 -->
		<XzGoTop></XzGoTop>
		<!-- 抽屉导航 -->
		<uni-drawer ref="drawerMenu">
			<text>抽屉导航</text>
			<button @click="$refs.drawerMenu.close()" type="primary">关闭</button>
			<uni-list>
				<uni-list-item title="商品列表" link="navigateTo" to="/pages/list/list"></uni-list-item>
				<uni-list-item title="商品详情" link="navigateTo" to="/pages/details/details"></uni-list-item>
				<uni-list-item @click="toUserCenter('login')" title="登录" link="switchTab" to="/pages/userCenter/userCenter"></uni-list-item>
				<uni-list-item @click="toUserCenter('register')" title="注册" link="switchTab" to="/pages/userCenter/userCenter"></uni-list-item>
				<uni-list-item @click="toUserCenter('profile')" title="用户中心" link="switchTab" to="/pages/userCenter/userCenter"></uni-list-item>
			</uni-list>
		</uni-drawer>
	</view>
</template>

<script>
import { productIndex } from '../../service'
	export default {
		data(){
			return {
				carouselItems:[],
				newArrivalItems:[],
				recommendedItems:[],
				topSaleItems:[],
			}
		},
		methods: {
			//用于传递用户中心的哪一部分 放置到localStorage
			toUserCenter(section){
				uni.setStorageSync('userCenterSection',section)
			},
			toSearch() {
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		},
		async onLoad(){
			let data = await productIndex()
			console.log(data);
			this.carouselItems = data.carouselItems
			this.recommendedItems = data.recommendedItems
			this.newArrivalItems = data.newArrivalItems
			this.topSaleItems = data.topSaleItems
		}
	}
</script>

<style lang="scss">
	.container {
		background-image: linear-gradient(180deg,#0aa1ed 100rpx,#fff 400rpx);
		.search {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-lg*2 $uni-spacing-col-base $uni-spacing-col-lg;
			.input-group {
				flex: 1;
				position: relative;
				image {
					position: absolute;
					left: 30rpx;
					top: 15rpx;
					width: 40rpx;
					height: 40rpx;
				}
				.icon {
					position: absolute;
					right: 30rpx;
					top: calc((70rpx - 30px)/2);
				}
				input {
					height: 70rpx;
					border-radius: 35rpx;
					background-color: #fff;
					padding: $uni-spacing-col-base;
					text-align: center;
				}
			}
		}
		.swiper {
			width: 100%;
			padding: $uni-spacing-row-base;
			.swiper-item {
				border-radius: $uni-border-radius-lg;
				image {
					width: 100%;
				}
			}
		}
	}
</style>